<script setup lang="ts">
// Composition API 的实用函数集合库
import { useVModel } from '@vueuse/core'

const props = defineProps({
  pageNum: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 1
  }
})

// Emits 声明
const emits = defineEmits(['update:pageNum', 'update:pageSize', 'pagination'])

// 双向绑定
const curr = useVModel(props, 'pageNum', emits)

// 双向绑定
const size = useVModel(props, 'pageSize', emits)

// 页数变化
const onShowSizeChange = (current: number, pageSize: number) => {
  curr.value = current
  size.value = pageSize
  emits('pagination')
}

// 总分页
const showTotal = (total: number) => {
  return `共 ${total} 条`
}

// 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
const handleChange = (page: number, pageSize: number) => {
  curr.value = page
  size.value = pageSize
  emits('pagination')
}
</script>

<template>
  <a-pagination
    v-bind:class="$attrs"
    v-model:current="curr"
    v-model:pageSize="size"
    :total="total"
    show-size-changer
    @showSizeChange="onShowSizeChange"
    :showTotal="showTotal"
    :showQuickJumper="true"
    @change="handleChange"
  />
</template>

<style scoped lang="less">

</style>
